﻿<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width; initial-scale=1">
<link rel="stylesheet" type="text/css"
  href="../css/jquery.mobile-1.1.1.css">
<script type="text/javascript"
  src="../javascript/lib/jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../js/common.js"></script>
<script type="text/javascript"
  src="../javascript/lib/jquery-mobile/jquery.mobile-1.1.1.min.js"></script>
<script type="text/javascript" src="../js/env.js"></script>
<script type="text/javascript">
  $(function() {
    $("#adminTablesInfo").show();
    $("#add_table").show();
    $("#add_foodtype").hide();
    $("#add_user").hide();
    $("#foodTypeInfo").hide();
    $("#userInfo").hide();
    $("a[data-name='tables']").click(function() {
      //       alert('tables');
      $("#adminTablesInfo").show();
      $("#foodTypeInfo").hide();
      $("#userInfo").hide();
      // menu control
      $("#add_table").show();
      $("#add_foodtype").hide();
      $("#add_user").hide();
    });
    $("a[data-name='foodType']").click(function() {
      //       alert('foodType');
      $("#adminTablesInfo").hide();
      $("#foodTypeInfo").show();
      $("#userInfo").hide();
      // menu control
      $("#add_table").hide();
      $("#add_foodtype").show();
      $("#add_user").hide();
    });
    $("a[data-name='users']").click(function() {
      //       alert('users');
      $("#adminTablesInfo").hide();
      $("#foodTypeInfo").hide();
      $("#userInfo").show();
      // menu control
      $("#add_table").hide();
      $("#add_foodtype").hide();
      $("#add_user").show();
    });
  })
</script>
<title>admin.index.title</title>
</head>
<body>
  <div data-role="page" id="home" data-title="Home">
    <div data-role="header" data-position="fixed">
      <h1>admin.index.title</h1>
      <a href="#" data-icon="add" id="add_table" class="ui-btn-right">admin.header.add_table</a>
      <a href="#" data-icon="add" id="add_foodtype" class="ui-btn-right">admin.header.add_foodtype</a>
      <a href="#" data-icon="add" id="add_user" class="ui-btn-right">admin.header.add_user</a>
      <div data-role="navbar">
        <ul>
          <li>
            <a href="#" class="ui-btn-active ui-state-persist" data-name="tables">admin.title.tables</a>
          </li>
          <li>
            <a href="#" data-name="foodType">admin.title.foodtype</a>
          </li>
          <li>
            <a href="#" data-name="users">admin.title.users</a>
          </li>
        </ul>
      </div>
      <!-- /navbar -->
    </div>
    <div data-role="content">
      <ul data-role="listview" data-inset="true" id="adminTablesInfo">
        <li data-role="list-divider">
          <h3>admin.index.table_title</h3>
        </li>
        <li>
            <a href="orders.html"> <img src="../images/table2.png"/>T2</a>
        </li>
        <li>
            <a href="#tableInfo.do?id=3"> <img src="../images/table3.png"/>T3</a>
        </li>
        <li>
            <a href="#tableInfo.do?id=4"> <img src="../images/table4.png"/>T4</a>
        </li>
      </ul>
      <ul data-role="listview" data-inset="true" id="foodTypeInfo">
        <li data-role="list-divider">
          <h3>admin.index.food_type_title</h3>
        </li>
      </ul>
      <ul data-role="listview" data-inset="true" id="userInfo">
        <li data-role="list-divider">
          <h3>admin.index.user_title</h3>
        </li>
      </ul>
    </div>
    <div data-role="footer" data-position="fixed">
      <h1>Tables</h1>
    </div>
  </div>
  <div></div>
</body>
</html>